<template>
    <div class="common-box" v-if="boxIsShow">
        <div class="common-content-box">
            <div class="title">首页营销海报设置</div>
            <div style="margin-bottom: 20px;">
                <el-upload
                    class="upload-demo"
                    drag
                    :action="UPLOAD_URL"
                    :on-success="handleSuccess">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
                </el-upload>
            </div>
            <div class="demo-image__preview">
                <el-image 
                  style="width: 100px; height: 100px"
                  :src="imageUrl" 
                  :preview-src-list="previewlist">
                </el-image>
            </div>
        </div>
    </div>
</template>
<script>
import { UPLOAD_URL } from '@/utils/http.js';
export default {
    data() {
        return {
            boxIsShow:false,
            UPLOAD_URL,
            imageUrl:'',
            previewlist:[]
        };
    },
    methods: {
        __init() {
            this.getIndexMarketingPoster();
        },
        getIndexMarketingPoster(){
            var url="userApi/getIndexMarketingPoster";
            var params={}
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    this.imageUrl=res.data;
                    this.previewlist=[];
                    this.previewlist.push(res.data);
                } else {
                this.$message.error(res.msg)
                }
            });
        },
        handleSuccess(response, file, fileList) {
            console.log(response);
            if(response.code==0){
                this.$message.success('上传成功');
                this.imageUrl=response.data;
                this.previewlist=[];
                this.previewlist.push(response.data);
                this.save();
            }
        },
        save(url){
            var url="manager/saveIndexMarketingPoster";
            var params={
                imageUrl:this.imageUrl
            }
            this.$post(url, params).then((res) => {
                if (res.code === 0) {
                    
                } else {
                this.$message.error(res.msg)
                }
            });
        }
    }
}
</script>
<style scoped lang="scss">
  .common-box{
    background-color: #f9f9fb;
    height: 100%;
  }
  .common-content-box{
    height: 95%;
    margin-top: 2%;
    width: 96%;
    display: inline-block;
  }
  .title{
    margin-bottom: 15px;
    font-size: 18px;
  }
</style>